<template>
	<view class="parkList" @click="isshow=false">
		<toplist :isshow='isshow' type='company' :isQg='true' @showChain='showChain' @changeQuery='changeQuery' @toDetail='toDetail'></toplist>
		<view class="flex" style="height: calc(100% - 72px)">
			<scroll-view class="nav-left" scroll-y style="height:100%;max-width: 90px;min-width: 90px;margin-right: 5px;" scroll-with-animation>
				<view class="nav-left-item" @click="changeLabel(item)" :key="index" :class="item.id==query.label_id?'active':''"
					v-for="(item,index) in labelList">
					{{item.label.length>5?item.label.slice(0,5):item.label}}
				</view>
			</scroll-view>
			<listPage type_name='company' height='100%' style='width: calc(100% - 100px);'  :list='list' :total='total' @getMore='getMore' :isSmall='true'>
				<endlist :isLoad='isLoad' :isfinsh='isfinsh' :length='list.length'></endlist>
			</listPage>
		</view>
	</view>
</template>

<script>
	import toplist from '@/components/toplist' 
	import endlist from '@/components/endlist' 
	import listPage from '@/components/listPage' 
	import { companylist,label } from '../../utils/api.js'
	export default {
		data() {
			return {
				list:[],
				labelList:[],
				total:0,
				query:{
					page:1,
					keywords:'',
					chain_id:'',
					city_id:uni.getStorageSync('chooseCity').id,
					label_id:'',
				},
				isshow:false,
				isfinsh:false,
				isLoad:false,
			}
		},
		components: {
			toplist,
			endlist,
			listPage
		}, 
		onLoad(option){
			this.query.keywords = option.keywords||''
			label({ismy:1,role_id:uni.getStorageSync('role_id')}).then(res=>{
				res.data.unshift({label:'不限',id:''})
				this.labelList = res.data
			})
			if(!option.chain_id){
				this.changeInit()
			}
		},
		onShow(){
			let chain,city
			city = uni.getStorageSync('chooseCity')
			if( (this.query.city_id==city.id)){
				return
			}else{
				this.query.city_id = city.id||''
				this.changeInit()
			}
			
		},
		methods: {
			changeLabel(item){
				this.query.label_id = item.id
				this.changeInit()
			},
			showChain(){
				if(this.isshow == true){
					this.isshow = false
					return
				}
				this.isshow=true
				console.log(this.isshow)
			},
			toPage(page,type){
				uni.navigateTo({
					url:`/pages/${page}/${page}`
				})
			},
			changeQuery(query){
				this.query = Object.assign(this.query,query)
				this.changeInit()
			},
			changeInit(){
				this.total = 0
				this.list = []
				this.query.page=1
				this.isfinsh = false
				this.getPark()
			},
			getMore(){
				this.query.page+=1
				this.getPark()
			},
			toDetail(item){
				uni.navigateTo({
					url:`/pages/parkDetail/parkDetail?id=${item.id}`
				})
			},
			getPark(){
				if(this.isfinsh){
					return
				}
				this.isLoad = true
				let data 
				if(this.query.paixu==2){
					data = {
						lat:uni.getStorageSync('lat'),lng:uni.getStorageSync('lng'),
						...this.query
					}
				}else{
					data = {
						...this.query
					}
				}
				companylist(data).then(res=>{
					if(this.query.page==1){
						this.list = res.data.data||[]
					}else{
						this.list.push(...res.data.data)
					}
					this.total = res.data.total
					this.isLoad = false
					if(res.data.last_page == this.query.page){
						this.isfinsh=true
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
page,.parkList{
	height: 100%;
}
.nav-left {
	width: 25%;
	background: #fdfdfd;
}

.nav-left-item {
	height: 40px;
	border-right: solid 1px #f3f3f3;
	border-bottom: solid 1px #f3f3f3;
	font-size: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nav-left-item:last-child{
	border-bottom: none;
}
.active{
	color: #40A9FF;
	// font-weight: bold;
}
</style>
